<template>
	<div style="width: 100%;">
	<div style="width: 100%;text-align: center;">
			<el-text size="large"><el-icon ><Memo /></el-icon> 我的购物车清单</el-text>
	</div>
	<div style="background-color: #E1337F; width: 100%;"></div>
	<br />
		<el-card>
			<template #header>
			  <div style="display: flex;justify-content: space-between;align-items: center;height: 0.625rem;">
			    <span>我的选择数：{{data.num}}</span>
			    <el-button size="large" style="background-color: #E1337F;color: #FFFFFF;" @click="delchoose()">清空选择</el-button>
			  </div>
			</template>
			<div style="margin-top: -20px;">
			<el-table :data="data.carts" border  style="width: 100%" height="500">
		    <el-table-column label="图片" width="220%" >
				<template #default="carts">
					<el-link ><el-image :src="$ip+`/public/shows/`+carts.row.commodity.pic" />
					</el-link>
				</template>
			</el-table-column>
		    <el-table-column prop="commodity.comname" label="商品名称" width="220%" />
		    <el-table-column prop="commodity.price" label="商品价格" width="220%" />
			<el-table-column prop="commodity.comsn" label="商品编号" width="220%"/>
			<el-table-column label="商品数量" width="220%" >
				<template #default="cart">
				  <el-input-number
				    v-model="cart.row.num"
				    :min="1"
					:max="parseFloat(cart.row.commodity.stock)"
				    @change="num(cart.row)"
				  ></el-input-number>
				</template>
				
			</el-table-column>
		    <el-table-column prop="price" label="商品总价" width="220%" />
			<el-table-column   label="选择" width="190%">
				<template #default="cartp">
				  <el-checkbox v-model="cartp.row.choose" label="选择该商品" size="large" @click="number(cartp.row.choose)"/>
				</template>
				
			</el-table-column>
		    <el-table-column  label="操作" width="180%">
				<template #default="cartq">
				  <el-button size="large" style="background-color: #E1337F; color: #FFFFFF;" @click="del(cartq.row.cartid)" >移除</el-button>
				</template>
				
			</el-table-column>
		  </el-table>
		  </div>
		  <div style="text-align: right;font-weight: bold;margin-top: 10px;">
			  <span>总价：{{prices()}}元</span>&emsp;
			  <el-button type="danger" size="large" style="background-color: #E1337F;" @click="goorder()">去下单</el-button>
		  </div>
		  </el-card>
	
	
	</div>
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import { User,Lock,Memo} from '@element-plus/icons-vue'
		import router from"../../router/index.js"
		import store from "../../store/index.js"
		import {success,warning,message,errors} from '../../store/alert.js'
		
		const data=reactive({
			carts:[{name:"111",num:1,choose:true,price:100,commodity:{stock:10}}],
			num:0
		})
		
		function num(cart){
			
			
			let a={
				cartid:cart.cartid,
				num:cart.num,
				comid:cart.commodity.comid
			}
			$postx("/user/updateCart",a).then((read) => {
				
				if(read.data.code==401){
					success(read.data.msg)
				}
				data.carts=read.data.data
			})
			
		}
		function  number(choose){
			if(choose){
				data.num--
			}else{
				data.num++
			}
		}
		const prices = computed(() => {
			return function() {
				let price=0
				for (let i = 0; i < data.carts.length; i++) {
					
					if(data.carts[i].choose){
						price=price+parseFloat(data.carts[i].price)
					}
				}
				return price.toFixed(2);
			}
		})
		function delchoose(){
			for (let i = 0; i < data.carts.length; i++) {
				if(data.carts[i].choose){
					data.carts[i].choose=false
				}
			}
			data.num=0
			
		}
		function del(cartid){
			$get("/user/del/"+cartid).then(function(resd){
				success(resd.data.msg)
				console.log(resd.data)
				data.carts=resd.data.data
			
			})
			
			
		}
		
		function goorder(){
			let c=[]
			for (let i = 0; i < data.carts.length; i++) {
				if(data.carts[i].choose){
					c.push(data.carts[i])
				}
			}
			store.state.com=c
			router.push("/goorder")
			
			
			
		}
		
	onMounted(()=>{
			$get("/user/findCart").then(function(resd){
				
				
				console.log(resd.data)
				data.carts=resd.data.data
			
			})
			
			
			
		})		
		
</script>

<style>
</style>